<template>
  <div class = 'tmpl'>
     <!-- 利用mint-ui中swiper组件实现轮播图 -->
     <mt-swipe :auto="3000">
	  <mt-swipe-item v-for = '(item,index) in list' :key ='index'>
        <img class = 'img' :src = 'item.img' alt=''>
	  </mt-swipe-item>
	</mt-swipe>
	<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <router-link to="/news/newslist">
	                    <span class="mui-icon mui-icon-home"></span>
	                    <div class="mui-media-body">新闻资讯</div>
					</router-link >
                    </li>
		           
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <router-link to="/photo/photolist">
	                    <span class="mui-icon mui-icon-navigate"></span>
	                    <div class="mui-media-body">图片分享</div>
	                    </router-link>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <router-link to="/goods/goodslist">
	                    <span class="mui-icon mui-icon-gear"></span>
	                    <div class="mui-media-body">商品购买</div>
	                    </router-link>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <a href="#">

	                    <span class="mui-icon mui-icon-paperplane"></span>
	                    <div class="mui-media-body">留言反馈</div>
	                    </a>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <a href="#">
	                    <span class="mui-icon  mui-icon-info"></span>
	                    <div class="mui-media-body">视频专区</div>
	                    </a>
                    </li>
                     <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            <a href="#">
	                    <span class="mui-icon  mui-icon-help"></span>
	                    <div class="mui-media-body">联系我们</div>
	                    </a>
                    </li>
		        </ul> 
		</div>
  </div>
</template>

<script>


   export default{

     data(){
        return{
           list:[
           {
               url:'https://www.4493.com/wangluomeinv/5536/1.htm',
               img:'http://img.1985t.com/uploads/attaches/2012/05/5536-7tFgEi.jpg'
           },
            {
	            url:'https://www.4493.com/motemeinv/6156/1.htm',
	            img:'http://img.1985t.com/uploads/attaches/2012/07/6156-azff5V.jpg'
            },
            {
	            url:'https://www.4493.com/motemeinv/6156/1.htm',
	            img:'http://img.1985t.com/uploads/attaches/2012/07/6156-azff5V.jpg'
            }
           ]
       }
     }
   }
</script>

<style scoped>
/*
轮播图的样式
 */
.img{
	width:100%;
	height:100%;
	}
 .mint-swipe {
    overflow: hidden;
    position: relative;
    height: 200px;
  }
  .mint-swipe-items-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
  .mint-swipe-items-wrap > div {
    position: absolute;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 100%;
    height: 100%;
    display: none;

  }
  .mint-swipe-items-wrap > div.is-active {
    display: block;
    -webkit-transform: none;
    transform: none;
  }
  .mint-swipe-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .mint-swipe-indicator {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    margin: 0 3px;
  }
  .mint-swipe-indicator.is-active {
    background: #fff;
  }


/*
定义9宫格中的图片样式
 */
.mui-content{
	background-color: #fff;
}
.mui-grid-view.mui-grid-9{
	background-color: #fff;
	border-top:none;
	border-left:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
	border-right:none;
	border-bottom:none;
}

.mui-icon{
	width: 50px;
	height: 50px;
}
  	            
.mui-icon-home{
	background-image: url(../../../statics/images/menu10.png);
	background-repeat: round;
}
.mui-icon-navigate{
	background-image: url(../../../statics/images/menu3.png);
	background-repeat: round;
}
.mui-icon-gear{
	background-image: url(../../../statics/images/menu4.png);
	background-repeat: round;
}
.mui-icon-paperplane{
	background-image: url(../../../statics/images/menu5.png);
	background-repeat: round;
}
.mui-icon-info{
	background-image: url(../../../statics/images/menu6.png);
	background-repeat: round;
}
.mui-icon-help{
	background-image: url(../../../statics/images/menu9.png);
	background-repeat: round;
}
.mui-icon-home:before,
.mui-icon-navigate:before,
.mui-icon-gear:before,
.mui-icon-paperplane:before,
.mui-icon-info:before,
.mui-icon-help:before{
	content: '';
}
</style>